<template>
	<input type="text" v-model="query">
	<TransitionGroup 
		tag="ul" 
		:css="false"
		@before-enter="onBeforeEnter"
		@enter="onEnter"
		@leave="onLeave"
	>
		<li
			v-for="(item, index) in computedList"
			:key="item.msg"
			:data-index="index">{{item.msg}}</li>
	</TransitionGroup>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import gsap from 'gsap'
	
	const query = ref('')
	
	const list = [
		{msg: 'Bruce Lee'},
		{msg: 'Jackie Chan'},
		{msg: 'Chuck Norris'},
		{msg: 'Jet Li'},
		{msg: 'Kung Fury'}
	]
	
	const computedList = computed(() => {
		return list.filter((item) => item.msg.toLowerCase().includes(query.value))
	})
	
	function onBeforeEnter(el){
		el.style.opacity = 0
		el.style.height = 0
	}
	function onEnter(el, done){
		gsap.to(el, {
			opacity: 1,
			height: '1.6em',
			delay: el.dataset.index * 1,
			onComplete: done
		})
	}
	function onLeave(el, done){
		gsap.to(el, {
			opacity: 0,
			height: 0,
			delay: el.dataset.index * 1,
			onComplete: done
		})
	}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
